<template>
  <ConsumerNavBar
  :class="{'ConsumerNavBar': true, 'consumer': consumer}"
  />

  <div class="lin_ConsumerNavBar" >
    <div style=" position: absolute; z-index: 1; top: 250px;">
      <img style="width: 600px;" src="https://res.insta360.com/static/infr_base/0b00daf0d439fda97299239dabe9cdcd/Insta360%20X3_Logo&Slogan_Online_White_EN.svg" alt="">
      <video playsinline autoplay loop muted style="height: 200px; border-radius: 20px; object-fit: fill;">
        <source src="https://media.insta360.com/static/infr_base/6f2cdbb854314d0c60ac84371a9ead63/preview3.mp4" type="video/mp4">
      </video>
    </div>

    <div class="lin_ConsumerNavBar_up" @wheel="handleScroll">
      <div>
          <video playsinline muted autoplay style="width: 100%; height: 100%; object-fit: fill;" >
            <source src="https://media.insta360.com/static/799499c95da727e1f88d156290987e5f/X3K2V-169.mp4" type="video/mp4">
          </video>
        </div>
    </div>

    <div class="lin_ConsumerNavBar_up lin_ConsumerNavBar_reframing">
      <div class="lin_ConsumerNavBar_reframing_list">
        <div class="lin_ConsumerNavBar_reframing_list_left">
          <video playsinline muted autoplay style="width: 100%; height: 100%; object-fit: fill;" >
            <source src="https://media.insta360.com/static/2ab4a7d6c45cd22ccfb55d754959a593/a.mp4" type="video/mp4">
          </video>
        </div>
        <div class="lin_ConsumerNavBar_reframing_list_right" id="container">

          <div class="lin_ConsumerNavBar_reframing_list_right_context" id="contentWrapper" v-show="true"'>
            <div>
              <p class="color">5.7K 360° CAPTURE</p>
              <h1>Unleash your creativity.</h1>
              <p class="context">X3 captures vivid 5.7K 360° video, so you'll never miss the action. With 360<br>degrees of footage at your fingertips, the creative possibilities are endless.</p>
            </div>
            <div class="lin_ConsumerNavBar_reframing_list_right_video">
              <video playsinline muted autoplay loop style="width: 100%; height: 100%; object-fit: fill;" >
                <source src="https://media.insta360.com/static/infr_base/29da40c4ab23bbad0b907b4867d13721/360_video.mp4" type="video/mp4">
              </video>
            </div>
          </div>

          <div class="lin_ConsumerNavBar_reframing_list_right_context" id="contentWrapper" v-show="true">
            <div>
              <p class="color">REFRAMING</p>
              <h1>Shoot first, frame later.</h1>
              <p class="context">Simply mount up, hit record and choose the best angles afterwards, using<br>easy reframing tools in the AI-powered Insta360 app. Share to any social<br>media platform in a tap without losing any quality. </p>
            </div>
            <div class="lin_ConsumerNavBar_reframing_list_right_video">
              <video playsinline muted autoplay loop style="width: 100%; height: 100%; object-fit: fill;" >
                <source src="https://media.insta360.com/static/infr_base/899be7f8cf2e41e1df2c1f2cb9b70499/Reframing_en.mp4" type="video/mp4">
              </video>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="lin_ConsumerNavBar_sensors" @wheel="sensors_list">
    <div class="lin_ConsumerNavBar_sensors_list">
      <div class="lin_ConsumerNavBar_sensors_list_bg" >
        <video playsinline muted autoplay style="width: 100%; height: 100%; object-fit: fill;" >
          <source src="https://media.insta360.com/static/4126ddf28d98d007157da8b39e8dbd4e/SENSOR_pc.mp4" type="video/mp4">
        </video>
      </div>

      <div class="lin_ConsumerNavBar_sensors_list_context" id="outsideWrap" @wheel="Xscroll($event)">
        <div>
          <p class="color">DUAL 1/2" 48MP SENSORS</p>
          <h1>Bigger sensor,<br>better content.</h1>
          <p class="context sensors_context">X3's new 1/2" 48MP sensors pack in more pixels for greater<br>clarity and detail, even in low light.</p>
        </div>
        <div style="margin-right: 500px;">
          <p class="color">72MP 360 PHOTOS</p>
          <h1>The most<br>megapixels ever. </h1>
          <p class="context sensors_context">The most megapixels ever in a 360 action cam. Capture<br>360° photos with more detail than ever before.</p>
          <img class="img-ct" src="https://res.insta360.com/static/infr_base/98c02f4219333ba93a8e8bc44b3f651b/72mp.jpg">
        </div>
        <div style="margin-right: 1000px;">
          <p class="color">360° ACTIVE HDR</p>
          <h1>Bring out the<br>details. </h1>
          <p class="context sensors_context">An innovative new HDR mode for stabilized action videos. In<br>tough lighting conditions, Active HDR reveals details in the<br>highlights and shadows that other action cameras miss.</p>
          <video playsinline muted autoplay loop class="player" style="width: 100%; height: 100%; object-fit: fill;" >
            <source src="https://media.insta360.com/static/infr_base/bb8b7719b01b2adc5660d3b1debd4737/HDR_EN.mp4" type="video/mp4">
          </video>
        </div>
      </div>
    </div>
  </div>

  

  <div class="lin_ConsumerNavBar">
    <div class="lin_ConsumerNavBar_up lin_ConsumerNavBar_reframing">
      <div class="lin_ConsumerNavBar_reframing_list">
        <div class="lin_ConsumerNavBar_reframing_list_right" id="container">
          <div class="lin_ConsumerNavBar_reframing_list_right_context" id="contentWrapper" v-show="true"'>
            <div>
              <p class="color">SINGLE-LENS MODE</p>
              <h1>4K first-person views.</h1>
              <p class="context">Select a lens to shoot wide-angle footage just like a single-lens action cam.Get<br>maximum resolution with 4K30fps or an extremely wide 170° field of view with<br>2.7K MaxView. Your first-person view footage has never looked so good.</p>
            </div>
            <div class="lin_ConsumerNavBar_reframing_list_right_video">
              <video playsinline muted autoplay loop style="width: 100%; height: 100%; object-fit: fill;" >
                <source src="https://media.insta360.com/static/infr_base/71dc91411fdc85e42938bfd64e59d87d/Single_lens_mode.mp4" type="video/mp4">
              </video>
            </div>
          </div>

          <div class="lin_ConsumerNavBar_reframing_list_right_context" id="contentWrapper" v-show="true">
            <div>
              <p class="color">ME MODE</p>
              <h1>See yourself at 60fps. </h1>
              <p class="context">Try the all-new Me mode which fixes the frame to focus only on you. Capture<br>yourself without the selfie stick at 60fps for epic slow mo.No need to reframe,<br>just keep yourself in frame!</p>
            </div>
            <div class="lin_ConsumerNavBar_reframing_list_right_video">
              <video playsinline muted autoplay loop style="width: 100%; height: 100%; object-fit: fill;" >
                <source src="https://media.insta360.com/static/infr_base/7b36682f766564eb5b5bd85ef8958164/Me%20mode.mp4" type="video/mp4">
              </video>
            </div>
          </div>
        </div>

        <div class="lin_ConsumerNavBar_reframing_list_left">
          <video playsinline muted autoplay style="width: 100%; height: 100%; object-fit: fill;" >
            <source src="https://media.insta360.com/static/5bd315cc50970dcc465ccbd1fb464c1b/b.mp4" type="video/mp4">
          </video>
        </div>
      </div>
    </div>


    <div class="lin_ConsumerNavBar">
      <div class="lin_ConsumerNavBar_up lin_ConsumerNavBar_reframing">
        <div class="lin_ConsumerNavBar_reframing_list">
          <div class="lin_ConsumerNavBar_reframing_list_left">
            <video playsinline muted autoplay style="width: 100%; height: 100%; object-fit: fill;" >
              <source src="https://media.insta360.com/static/7020544279ac89700bfff6e9101459ed/c.mp4" type="video/mp4">
            </video>
          </div>
          <div class="lin_ConsumerNavBar_reframing_list_right" id="container">
            <div class="lin_ConsumerNavBar_reframing_list_right_context" id="contentWrapper" v-show="true"'>
              <div>
                <p class="color">INVISIBLE SELFIE STICK</p>
                <h1>Impossible<br>third-person views.</h1>
                <p class="context">The Invisible Selfie Stick disappears in your edit, enabling you to capture<br>aerial angles and third-person perspectives that are only possible with a<br>360 action cam. No drone, no problem!</p>
              </div>
              <div class="lin_ConsumerNavBar_reframing_list_right_video">
                <video playsinline muted autoplay loop style="width: 100%; height: 100%; object-fit: fill;" >
                  <source src="https://media.insta360.com/static/infr_base/09ff85fbdf363126a31edc95bc89c4b3/3pv.mp4" type="video/mp4">
                </video>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="lin_ConsumerNavBar">
      <div class="lin_ConsumerNavBar_up lin_ConsumerNavBar_reframing">
        <div class="lin_ConsumerNavBar_reframing_list">
          <div class="lin_ConsumerNavBar_reframing_list_right" id="container">
            <div class="lin_ConsumerNavBar_reframing_list_right_context" id="contentWrapper" v-show="true"' >
              <div>
                <p class="color">FLOWSTATE STABILIZATION</p>
                <h1>Steady no matter what.</h1>
                <p class="context">Bumpy trails and big waves are no match for X3’s leading action cam image stabilization. FlowState keeps your videos smooth no matter what. </p>
              </div>
              <div class="lin_ConsumerNavBar_reframing_list_right_video"  >
                <video playsinline muted autoplay loop style="width: 100%; height: 100%; object-fit: fill;" >
                  <source src="https://media.insta360.com/static/infr_base/239c650a4d6bbdbd57b496e484902db0/flowstate.mp4" type="video/mp4">
                </video>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>




    
  </div>


  

  


</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';



export default defineComponent({

  setup(){
    const { $gsap } = useNuxtApp()
    const data = reactive({
      consumer: ref(),
      showFirstDiv: true,
      showSecondDiv: false,
      isContentVisible: false, // 控制内容是否可见的状态
      scrollAllowed: true // 控制是否允许滚动的状态
    })
    

    const handleScroll = (event: any) => {
      const deltaY = event.deltaY;
      // 进行高度计算或其他操作
      if (deltaY >= 100){
        data.consumer = true
      }
      else if ( deltaY <= -100 )
      data.consumer = false
      // console.log(`Scroll Height: ${deltaY}px`);
    }


    const sensors_list = () => {
      // 计算内容从右边屏幕出现的位置，可以根据需要调整这个值
      const scrollTrigger = window.innerHeight / 2;

      // 如果滚动位置超过了触发位置
      if (!data.isContentVisible && data.scrollAllowed && window.scrollY > scrollTrigger) {
        // 使用 GSAP 动画将内容移动到屏幕内
        $gsap.to('.lin_ConsumerNavBar_sensors_list_context',
         { 
            x: 0,
            duration: 1,
            onComplete: () => {
              data.isContentVisible = true
              data.scrollAllowed = false
            },
            ease: 'elastic'
        });
      }
    }


    // 内容横向滚动
    const Xscroll = (e: any) => {
      e.preventDefault();
      const eventDelta = -e.wheelDelta || -e.deltaY * 40;
      const outsideWrap = document.getElementById('outsideWrap'); // 获取包裹元素

      if (outsideWrap) {
        outsideWrap.scrollLeft += eventDelta / 2; // 根据滚动事件调整水平滚动位置
      }
    }

    onMounted(() => {
      // 添加事件监听
      // window.addEventListener('wheel', handleScroll);
      $gsap.set('.lin_ConsumerNavBar_sensors_list_context', { x: window.innerWidth });

    });


    onUnmounted(() => {
      // 组件卸载前移除事件监听
      window.removeEventListener('wheel', sensors_list);
    });


    return{
      ...toRefs(data),
      handleScroll,
      sensors_list,
      Xscroll


    }
  }

})

</script>

<style scoped>

* {
  margin: 0;
  padding: 0;
  color: white;
  transition: all 1s ease;
}

.ConsumerNavBar {
  position: fixed;
  z-index: 9999;
  transition: all 3s;
}

.consumer {
  transition: all 3s;
  top: 0;
  width: 100%;
}

/* 响应式布局 - 当屏幕宽度小于或等于 600px 时 */
@media screen and (max-width: 1330px) {


/* 将侧边栏隐藏 */
.ConsumerNavBar {
    display: none;
  }
}

.lin_ConsumerNavBar {
  position: relative;
  height: 100%;
  width: 100%;
  align-items: center;
  display: inline-block;
  background-color: black;
}

.lin_ConsumerNavBar_up {
  height: 100%;
  width: 100%;
  text-align: center;
}

.lin_ConsumerNavBar_reframing {
  float: left;
}


.lin_ConsumerNavBar_reframing_list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  padding: 0;
  margin: 0;
}


.lin_ConsumerNavBar_reframing_list_left {
  position: sticky;
  width: 589px;
  height: 90vh;
  background-color: black;
}

.lin_ConsumerNavBar_reframing_list_right {
  position: sticky;
  width: 589px;
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
}

/* 隐藏滚动条 */
.lin_ConsumerNavBar_reframing_list_right::-webkit-scrollbar {
  width: 0 !important
}

.lin_ConsumerNavBar_reframing_list_right_context {
  text-align: start;
  line-height: 40px;
  align-items: center;
  transition: opacity 0.5s ease;
}

#contentWrapper {
  margin-bottom: 400px;
  margin-top: 200px;
  height: 300px
}


.color {
  display: inline-block;
  color: #5f98d6;
  font-size: 17px;
  font-weight: bolder;
  background: linear-gradient(90deg,#5f98d6,#d0f9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.context {
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 24px;
  font-weight: 400;
  font-size: 15px;
  color: #c8c9cd;
  white-space: pre-wrap;
}

.lin_ConsumerNavBar_reframing_list_right_video {
  height: 315px;
}

.lin_ConsumerNavBar_reframing_list_right_video video {
  border-radius: 15px;
}

.show {
  visibility: hidden;
}

.lin_ConsumerNavBar_sensors {
  position: relative;
  height: 100vh;
  width: 100%;
  
}


.lin_ConsumerNavBar_sensors_list_context {
  text-align: center;
  white-space: nowrap;
  top: -750px;
  z-index: 1;
  overflow: hidden;
  overflow-y: hidden;
  overflow-x: scroll;
}

/* 隐藏滚动条 */
.lin_ConsumerNavBar_sensors_list_context::-webkit-scrollbar {
  width: 0 !important
}

.lin_ConsumerNavBar_sensors_list_context div {
  display: inline-block;
  height: 300px;
  width: 600px;
  margin: auto 700px;
  transition: transform 0.5s ease;
  margin-right: 20px;
  text-align: center;
  text-align: left;
  font-size: 20px;
}

.sensors_context {
  color: white;
  font-size: 16px;
}

.img-ct {
  display: block;
  height: 250px;
  width: 400px;
  top: -250px;
  right: -500px;
}

.player {
  display: block;
  top: -275px;
  right: -500px;

}

</style>